<template>
  <transition name='fade'>
    <div class="llt-alert" v-show="showAlert" @click="closeByModal">
      <div class="wrap">
        <div class="btn-base btn-close" @click="close" v-show="showClose">
        </div>
        <div class="content">
          <slot></slot>
        </div>
        <div slot="footer" class="llt-alert-footer">
          <el-button class="llt-alert-btn llt-alert-btn-qx" @click="cancel" v-show="cancelBtn.show">{{cancelBtn.label}}</el-button>
          <el-button class="llt-alert-btn llt-alert-btn-qd" @click="confirm"  v-show="confirmBtn.show">{{confirmBtn.label}}</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    data(){
      return {

      }
    },
    props:{
      showAlert:{
        type: Boolean,
        default: true
      },
      showClose: {
        type: Boolean,
        default: true
      },
      modalClose: {
        type: Boolean,
        default: false
      },
      confirmBtn:{
        type:Object,
        default:function () {
          return { label:'确定',show:true }
        }
      },
      cancelBtn:{
        type:Object,
        default:function () {
          return { label:'取消',show:false }
        }
      }
    },
    methods: {

      confirm(){
        this.$emit('confirm');
        this.close();
      },
      cancel(){
        this.$emit('cancel');
        this.close();
      },
      close() {
        this.$emit('close');
        this.$emit('update:showAlert', false);
      },
      closeByModal(){
        if(this._props.modalClose)
          this.close();
      }

    }
  }
</script>
<style lang="scss">
  .llt-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    transition: all .5s ease-in-out;
    font: 14px PingFang-SC;
    .wrap {
      background-color: #FFFFFF;
      position: absolute;
      z-index: 1002;
      max-width: 600px;
      min-width: 280px;
      top: 200px;
      left: 50%;
      transform: translate(-50%, 0%);
      border-radius: 4px;
      .content {
        text-align: center;
        color: #666666;
        padding: 26px 45px 12px 45px;
      }
      .btn-base {
        position: fixed;
        right:-11px;
        top:-11px;
        height: 22px;
        width: 22px;
        text-align: center;
        z-index: 9999;
        border: 0;
        cursor: pointer;
      }
      .btn-close{
        background: url(../../../assets/bussiness/close.png) no-repeat center ;
      }
      .llt-alert-footer{
        text-align: center;
        margin-bottom: 30px;
        .llt-alert-btn{
          min-width: 80px;
          height: 30px;
          border-color: #FFA01D ;
          padding: 0 12px;
        }
        .llt-alert-btn-qx{
          color: #FFA01D;
        }
        .llt-alert-btn-qx:hover{
          background-color: #FFFFFF;
        }
        .llt-alert-btn-qd{
          color: #FFFFFF;
          background-color: #FFA01D;
        }
      }
    }
  }

</style>
